<template>
  <a-card :title="this.unMapCount + ' ' + $t('room') + $t('unmapping')">
    <template #extra>
      <a-space>
        <a-button :icon="loading ? 'loading' : 'reload'" @click="fetchData()">
        </a-button>
      </a-space>
    </template>

    <a-table size="small" :indentSize="0" :expandRowByClick="false" :columns="columns" :data-source="data" :row-key="getRowKey" :loading="loading" :pagination="false">
      <template slot="roomId" slot-scope="text, record">
        <span v-if="record.supplier === null || record.supplier === undefined || record.supplier === ''" class="ant-alert-message">
        {{ record.roomId }}
        </span>
        <span v-else>
        {{ record.supplier }},{{ record.supplierHotelId }},{{ record.supplierRoomId }}
        </span>
      </template>
      <template slot="supplierRoomNameEn" slot-scope="text, record">
        <span v-if="record.supplier === null || record.supplier === undefined || record.supplier === ''" class="ant-alert-message">
        {{ record.roomNameEn }} <br/> {{ record.roomNameCn }}
        </span>
        <span v-else>
        {{ record.supplierRoomNameEn }} <br/> {{ record.supplierRoomNameCn }}
        </span>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-space>
          <a-button @click="showMapForm(record)" v-if="record.supplier === null || record.supplier === undefined || record.supplier === ''">
            {{$t("map_room")}}
          </a-button>
          <a-popconfirm v-else :title='$t("are_you_sure")' ok-text="Yes" okType="danger" cancel-text="No" @confirm="cancelMap(record)">
            <a-icon slot="icon" type="question-circle-o" style="color: red" />
            <a-button>{{$t("cancel")}}{{$t("mapping")}}</a-button>
          </a-popconfirm>
        </a-space>
      </template>
      <template v-for="(item, index) in columns" :slot="item.slotName">
        <span :key="index">{{ $t(item.slotName) }}</span>
      </template>
    </a-table>

    <a-modal v-model="mapFormVisible" :maskClosable="false" :title="$t('map_room')" :confirm-loading="confirmLoading" :okText="okText" :ok-button-props="okButtonProps" @ok="saveMapForm()" width="90%">
      <a-descriptions bordered size="small">
        <a-descriptions-item :label="$t('room_id')">
          {{ mapRoom.roomId }}
        </a-descriptions-item>
        <a-descriptions-item :label="$t('room_name')">
          {{ mapRoom.roomNameEn }}<br/>{{ mapRoom.roomNameCn }}
        </a-descriptions-item>
        <a-descriptions-item :label="$t('room_area')">
          {{ mapRoom.roomArea }}
        </a-descriptions-item>
      </a-descriptions>
      <a-table size="small" :columns="unMapColumns" :data-source="unMapData" :row-key="record => record.id" :loading="unMapLoading" :pagination="false" :row-selection="rowSelection" :scroll="{ y: 350 }">
        <template slot="roomNameEn" slot-scope="text, record">
          {{ record.roomNameEn }} <br /> {{ record.roomNameCn }}
        </template>
        <template v-for="(item, index) in unMapColumns" :slot="item.slotName">
          <span :key="index">{{ $t(item.slotName) }}</span>
        </template>
      </a-table>
    </a-modal>

  </a-card>
</template>

<script>
import {getRoomMappingList, getUnMappingRooms, cancelRoomMapping} from '@/services/mapping'
import {isEmpty} from "../../utils/util";
import {saveRoomMappings} from "../../services/mapping";

export default {
  name: "RoomMap",
  props: ['HotelId'],
  i18n: require('../i18n'),
  data() {
    return {
      data : [],
      columns:[
        {
          dataIndex: 'roomId',
          align: 'left',
          slotName: "room_id",
          slots: {title: 'room_id'},
          scopedSlots: {customRender: 'roomId'},
          width: '20%',
        },
        {
          dataIndex: 'supplierRoomNameEn',
          align: 'left',
          slotName: "room_name",
          slots: {title: 'room_name'},
          scopedSlots: {customRender: 'supplierRoomNameEn'},
        },
        {
          dataIndex: 'updatedByName',
          align: 'center',
          slotName: "updatedByName",
          slots: {title: 'updatedByName'},
          width: '10%',
        },
        {
          dataIndex: 'updatedTime',
          align: 'center',
          slotName: "updatedTime",
          slots: {title: 'updatedTime'},
          width: '8%',
        },
        {
          align:'center',
          scopedSlots: { customRender: 'action' },
          slotName: "operation",
          slots: { title: 'operation' },
          width: '10%',
        }
      ],
      loading: false,
      confirmLoading: false,
      mapFormVisible: false,
      unMapColumns:[
        {
          dataIndex: 'supplier',
          align: 'left',
          slotName: "supplier",
          slots: { title: 'supplier' },
          sorter: (a, b) => a.supplier.localeCompare(b.supplier),
        },{
          dataIndex: 'supplierHotelId',
          align: 'left',
          slotName: "supplier_hotel_id",
          slots: { title: 'supplier_hotel_id' },
          sorter: (a, b) => a.supplierHotelId.localeCompare(b.supplierHotelId),
        },{
          dataIndex: 'supplierRoomId',
          align: 'left',
          slotName: "supplier_room_id",
          slots: { title: 'supplier_room_id' },
          sorter: (a, b) => a.supplierRoomId.localeCompare(b.supplierRoomId),
        },{
          dataIndex: 'roomNameEn',
          align: 'left',
          slotName: "room_name",
          slots: { title: 'room_name' },
          scopedSlots: { customRender: 'roomNameEn' },
          sorter: (a, b) => a.roomNameEn.localeCompare(b.roomNameEn),
          width: '40%',
        },{
          dataIndex: 'updatedTime',
          align:'center',
          slotName: "updatedTime",
          slots: { title: 'updatedTime' },
        },{
          dataIndex: 'roomDesc',
          align: 'left',
          slotName: "room_desc",
          slots: { title: 'room_desc' },
        },
      ],
      unMapLoading: false,
      unMapData:[],
      selectedRows:[],
      mapRoom: {},
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
          if(selectedRows.length > 0) {
            this.okButtonProps = { props: { disabled: false } }
            this.okText = this.$t('submit') + this.$t('mapping') + ' ' + selectedRows.length + ' ' + this.$t('room')
          }else {
            this.okButtonProps = { props: { disabled: true } }
            this.okText = this.$t('submit')
          }
        },
      },
      okText: this.$t('submit'),
      okButtonProps: { props: { disabled: true } },
      unMapCount: 0,
    }
  },
  methods: {
    fetchData(){
      this.loading = true
      getRoomMappingList(this.$props.HotelId).then(res => {
        let list = res.data.data
        let rooms =[]
        list.forEach(item => {
          if(!rooms.find(e => e.roomId === item.roomId)){
            let obj = {}
            obj.roomId = item.roomId
            obj.hotelId = item.hotelId
            obj.roomNameEn = item.roomNameEn
            obj.roomNameCn = item.roomNameCn
            obj.roomArea = item.roomArea
            rooms.push(obj)
          }
        })
        rooms.forEach(item => {
          item.children = []
          item.children = list.filter(e => e.roomId === item.roomId && !isEmpty(e.supplier))
        })
        this.data = rooms
        this.unMapCount = res.data.message
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    getRowKey(record){
      return record.roomId + '_' + record.hotelId + '_' + record.supplier + '_' + record.supplierHotelId + '_' + record.supplierRoomId
    },
    showMapForm(record){
      this.mapRoom = record
      this.mapFormVisible = true
      this.getUnMappingRooms()
    },
    saveMapForm(){
      let postData = {}
      postData.roomId = this.mapRoom.roomId
      postData.supplierRooms = this.selectedRows
      this.confirmLoading = true
      saveRoomMappings(postData).then(res => {
        console.log(res)
        this.confirmLoading = false
        this.fetchData()
        this.getUnMappingRooms()
      }).catch(error => {
        console.log(error)
        this.confirmLoading = false
      })
    },
    cancelMap(record){
      cancelRoomMapping({
        hotelId: record.hotelId,
        supplier: record.supplier,
        supplierHotelId: record.supplierHotelId,
        supplierRoomId: record.supplierRoomId
      }).then(res => {
        console.log(res)
        this.fetchData()
      }).catch(error => {
        console.log(error)
      })
    },
    getUnMappingRooms(){
      this.unMapLoading = true
      this.selectedRows = []
      this.okButtonProps = { props: { disabled: true } }
      this.okText = this.$t('submit')
      getUnMappingRooms(this.$props.HotelId).then(res => {
        this.unMapData = res.data.data
        this.unMapLoading = false
      }).catch(error => {
        console.log(error)
        this.unMapLoading = false
      })
    }
  },
  created() {
    this.fetchData()
  },
}
</script>